<template>
    <div class="site-manager-box card-box" v-if="roleStore.isSuperAdmin">
        <h5 class="card-title">
            <el-icon size="20" color="#FB8B24"><Operation /></el-icon>
            网站管理
        </h5>
        <div class="card-text">
            <el-menu default-active="1" :default-openeds="defaultOpeneds">
                <el-sub-menu index="1">
                    <template #title>
                        <span>网站管理</span>
                    </template>
                    <el-menu-item index="1-1">通知</el-menu-item>
                    <el-menu-item index="1-2">註册</el-menu-item>
                    <el-menu-item index="1-3">服務</el-menu-item>
                    <el-menu-item index="1-4">回饋</el-menu-item>
                    <el-menu-item index="1-5">練習</el-menu-item>
                    <el-menu-item index="1-6">用户</el-menu-item>
                    <el-sub-menu index="1-7">
                        <template #title>
                            <span>課程</span>
                        </template>
                        <el-menu-item index="1-7-1" @click="goPage('/console/course/category')">管理课程和类别</el-menu-item>
                        <el-menu-item index="1-7-2">课程自订栏位</el-menu-item>
                        <el-menu-item index="1-7-3" @click="goPage('/console/course/category/create')">新增一个类别</el-menu-item>
                        <el-menu-item index="1-7-4" @click="goPage('/console/course/create')">新增课程</el-menu-item>
                        <el-menu-item index="1-7-5">还原课程</el-menu-item>
                        <el-menu-item index="1-7-6">课程预设设定</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="1-8">成績</el-menu-item>
                    <el-menu-item index="1-9">能力</el-menu-item>
                    <el-menu-item index="1-10">H5P</el-menu-item>
                    <el-menu-item index="1-11">授權條款</el-menu-item>
                    <el-menu-item index="1-12">位置</el-menu-item>
                    <el-menu-item index="1-13">語言</el-menu-item>
                    <el-menu-item index="1-14">傳訊</el-menu-item>
                    <el-menu-item index="1-15">付款</el-menu-item>
                    <el-menu-item index="1-16">外掛</el-menu-item>
                    <el-menu-item index="1-17">安全</el-menu-item>
                    <el-menu-item index="1-18">外觀</el-menu-item>
                    <el-menu-item index="1-19">首頁</el-menu-item>
                    <el-menu-item index="1-20">主機</el-menu-item>
                    <el-menu-item index="1-21">報表</el-menu-item>
                    <el-menu-item index="1-22">行動</el-menu-item>
                    <el-menu-item index="1-23">開發</el-menu-item>
                    <el-menu-item index="1-24">MoodleNet</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoleStore } from '@/stores/role'
import { goPage } from '@/utils/global'

const defaultOpeneds = ref(['1']) // 默认展开的菜单项
const roleStore = useRoleStore()
</script>

<style lang="less" scoped>
.site-manager-box {
    margin-top: 24px;

    .el-menu {
        --el-menu-bg-color: transparent; // 背景色
        --el-menu-hover-bg-color: transparent; // hover时的行背景色
        --el-menu-base-level-padding: 1px;
        --el-menu-level-padding: 12px; // 左右内边距
        --el-menu-item-font-size: 15px; // 字体大小
        --el-menu-item-height: 25px; // 一级导航行高
        --el-menu-sub-item-height: 25px; // 二级导航行高

        border-right: none;

        .el-sub-menu {
            :deep(.el-menu) {
                padding: 4px 0;
            }

            :deep(.el-sub-menu__title) {
                flex-direction: row-reverse;
                justify-content: flex-end;

                .el-sub-menu__icon-arrow {
                    margin-right: 6px;
                    margin-top: 0;
                    position: static;
                    transform: rotate(-90deg) !important;
                }
            }

            &.is-opened {
                & > :deep(.el-sub-menu__title) {
                    .el-sub-menu__icon-arrow {
                        transform: rotate(0) !important;
                    }
                }
            }
        }
    }
}
</style>
